<template>
    <el-card class="!border-none " shadow="never">
        
        <el-form class="-mb-4" :model="queryFormData" label-width="98px" inline>
            <div class="grid grid-cols-4 gap-4">
                <div>
                    <el-form-item label="客户姓名">
                        <el-input
                            placeholder="请输入客户姓名"
                            
                            class="w-64"
                            v-model="queryFormData.name"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        
                        </el-input>
                    </el-form-item>
                </div>
                
                <div>
                    <el-form-item label="客户电话">
                        <el-input
                            placeholder="请输入工单号"
                            
                            class="w-64"
                            v-model="queryFormData.phone"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        
                        </el-input>
                    </el-form-item>
                </div>
                
                
                <div>
                    <el-form-item label="中间人">
                        <el-input
                            class="w-64"
                            placeholder="请输入中间人"
                            
                            v-model="queryFormData.intermediary"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        </el-input>
                    </el-form-item>
                </div>
                
                <div class="flex flex-row-reverse">
                    <el-form-item>
                        <div class="flex-1  flex flex-row-reverse  w-full ">
                            <el-button class="mx-2" type="primary" @click="getPageLists">查询</el-button>
                            <el-button class="mx-2" @click="resetParams">重置</el-button>
                        </div>
                    
                    </el-form-item>
                </div>
            </div>
        </el-form>
    </el-card>
    
    
    <el-card class="!border-none mt-5" shadow="never">
        <div class="flex">
            <div class="flex-1">
                <el-button type="primary" @click="handleCreateOrder()">
                    <template #icon>
                        <icon name="el-icon-Plus"/>
                    </template>
                    添加客户
                </el-button>
            </div>
        </div>
        
        <el-table
            ref="tableRef"
            size="large"
            class="mt-2"
            v-loading="pagerData.loading"
            :data="pagerData.lists"
            row-key="id"
        >
            <el-table-column label="公司名称" fixed prop="companyName" min-width="150"/>
            <el-table-column label="客户姓名" fixed prop="name" :show-overflow-tooltip="true" min-width="120"/>
            <el-table-column label="客户电话" fixed prop="phone" min-width="120"/>
            <el-table-column label="所在部门" prop="department" min-width="120"/>
            <el-table-column label="所处职位" prop="position" min-width="120"/>
            <el-table-column label="中间人" prop="intermediary" min-width="120"/>
            <el-table-column label="关注点" fixed prop="concerns" min-width="180"/>
            <el-table-column label="子女情况" prop="childrenSituation" min-width="120"/>
            <el-table-column label="是否交涉" prop="isGif" :formatter="formatIsGif" min-width="160"/>
            
            <el-table-column label="兴趣爱好" prop="hobbies" min-width="160"/>
            <el-table-column label="建单时间" prop="createTime " min-width="180" :formatter="formatterCreateTime"/>
            <el-table-column label="操作人" prop="optPerson" min-width="150"/>
            
            <el-table-column label="操作" width="170" fixed="right">
                <template #default="{ row }">
                    <el-button
                        type="primary"
                        link
                        @click="handleRowDetail(row)"
                    >
                        详情
                    </el-button>
                    
                    
                    <el-button
                        type="primary"
                        link
                        @click="handleEdit(row)"
                    >
                        编辑
                    </el-button>
                    
                    
                    <el-button
                        type="danger"
                        link
                        @click="handleDelete(row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <pagination v-model="pagerData" @change="getPageLists"/>
    
    </el-card>
    
    
    <Detail ref="detailRef" @close="showDetailRef=false" v-if="showDetailRef"/>

</template>

<script lang='ts' setup>


import {usePagerManager} from "@/manager/base/PagerManager";
import router from "@/base/router";
import routerManager from "@/manager/base/RouterManager";
import feedback from "@/utils/feedback";
import {UnwrapNestedRefs} from "@vue/reactivity";
import {
    delLogisticsAdmin,
    getLogisticsAdminListByPage
} from "@/api/logistics/CrmLogisticsAdminController";
import CrmAdminSearchRequest from "@/api/logistics/request/CrmAdminSearchRequest";
import {useFormatterTimeManager} from "@/manager/base/FormatterManager";
import CrmLogisticsAdminDTO from "@/api/logistics/dto/CrmLogisticsAdminDTO";
import Detail from "@/views/logistics/client/clientList/detail.vue";

const detailRef = shallowRef(Detail)
const showMore = ref(true)
const showDetailRef = ref(false)
let {formatterCreateTime} = useFormatterTimeManager();

/**
 * 定义查询数据
 */
let queryFormData: UnwrapNestedRefs<CrmAdminSearchRequest> = reactive(new CrmAdminSearchRequest())

const {pagerData, getPageLists, resetParams, resetOnePage} = usePagerManager({
    fetchFun: getLogisticsAdminListByPage,
    params: queryFormData
})

const formatIsGif = (cellValue: number) => {
    return cellValue === 1 ? '已交涉' : '未交涉';
};


function handleCreateOrder() {
    let routePathByName = routerManager.getRoutePathByName("logistics/client/clientList/create");
    console.log(routePathByName)
    if (routePathByName) {
        router.push(routePathByName)
    }
}


async function handleEdit(row: any) {
    let routePathByName = routerManager.getRoutePathByName("logistics/client/clientList/edit");
    console.log(routePathByName)
    if (routePathByName) {
        await router.push({path: routePathByName, query: {id: row.id}});
    }
}

async function handleDelete(row: any) {
    await feedback.confirm("确定删除这条记录吗？")
    await delLogisticsAdmin({id: row.id})
    await getPageLists()
}


// ------------------------------------------ ** 处理详情 ** ------------------------------------------------------------------------------------

async function handleRowDetail(row: CrmLogisticsAdminDTO) {
    showDetailRef.value = true
    await nextTick()
    detailRef.value?.open(row.id)
}


onMounted(() => {
    getPageLists()
    
})


</script>

